<template>
  <ElTree
    ref="elTree"
    :data="tree"
    :showCheckbox="showCheckbox"
    nodeKey="id"
    :defaultCheckedKeys="modelValue"
    :defaultExpandAll="defaultExpandAll"
    @check="handleCheck"
  />
</template>
<script lang="ts" setup>
import type { FormTreeItem } from "./types";

type ModelValue = (string | number)[];

withDefaults(
  defineProps<{
    modelValue: ModelValue;
    tree?: FormTreeItem[];
    showCheckbox?: boolean;
    defaultExpandAll?: boolean;
  }>(),
  {
    tree: () => [],
  },
);

const emits =
  defineEmits<(e: "update:modelValue", value: ModelValue) => void>();

const handleCheck = (
  _data: FormTreeItem,
  {
    checkedKeys,
  }: {
    checkedKeys: ModelValue;
    checkedNodes: FormTreeItem[];
    halfCheckedKeys: ModelValue;
    halfCheckedNodes: FormTreeItem[];
  },
) => {
  emits("update:modelValue", checkedKeys);
};
</script>
